<!--
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
-->

<ng-container *transloco="let t">
  <ng-container *ngIf="model$ | async as vm">
    <div
      [class.story-dropdown]="storyDropdown"
      cdkTrapFocus
      role="dialog"
      id="assign-user-dialog"
      data-test="assign-user-dialog"
      aria-labelledby="assign-user-dialog-label"
      aria-modal="true"
      class="assign-user-container"
      [style.max-inline-size]="setMaxInlineSize()"
      [style.inline-size]="setWidth()">
      <div
        class="assignees-wrapper"
        [class.story-title]="storyDropdown"
        [class.visually-hidden]="storyDropdown && vm.assigned.length > 0"
        data-test="assignees-wrapper">
        <h2
          #assignUserLabel
          tgAutoFocus
          tabindex="-1"
          id="assign-user-dialog-label"
          class="assignees-title"
          [ngClass]="{
            'assignee-title': vm.assigned.length > 0,
            'unassign-title': vm.assigned.length === 0
          }">
          <ng-container *ngIf="vm.assigned.length">{{
            t('project.assign_user.title')
          }}</ng-container>
          <ng-container *ngIf="!vm.assigned.length">{{
            t('project.assign_user.unassigned')
          }}</ng-container>
        </h2>
      </div>
      <tui-scrollbar class="assigness-container">
        <ul
          #assignedList
          *ngIf="vm.assigned.length"
          tabindex="-1"
          [attr.aria-label]="t('project.assign_user.title')">
          <li
            class="option"
            *ngFor="
              let assignedUser of vm.assigned;
              index as i;
              trackBy: trackByMember
            ">
            <button
              class="user-row"
              data-test="assigned-member"
              [class.view-only]="viewOnly"
              type="button"
              [attr.aria-label]="
                t('project.assign_user.unassign-aria', {
                  name: assignedUser.fullName,
                  username: assignedUser.username
                })
              "
              [attr.aria-disabled]="viewOnly"
              (keydown.enter)="
                viewOnly ? null : onUnassign($event, assignedUser)
              "
              (click)="viewOnly ? null : onUnassign($event, assignedUser)">
              <div class="user">
                <tg-user-avatar
                  size="m"
                  class="no-border"
                  [color]="assignedUser.color"
                  [user]="assignedUser"
                  type="light"
                  [rounded]="true"
                  aria-hidden="true"></tg-user-avatar>
                <span
                  class="user-identifier"
                  [innerHtml]="
                    vm.currentUser.username === assignedUser.username
                      ? t('commons.your_user', { name: assignedUser.fullName })
                      : assignedUser.fullName || assignedUser.username
                  ">
                </span>
              </div>
              <tui-svg
                *ngIf="!viewOnly"
                class="unassign-btn"
                [tgUiTooltip]="t('project.assign_user.remove-assignee')"
                [tgUiTooltipStaysOpenOnHover]="false"
                tgUiTooltipPosition="bottom-right"
                src="close">
              </tui-svg>
            </button>
          </li>
        </ul>
      </tui-scrollbar>

      <ng-container *ngIf="!viewOnly">
        <form
          class="search-form"
          [formGroup]="searchTextForm">
          <tg-ui-input
            [icon]="'search'"
            [label]="t('project.assign_user.add')">
            <input
              [tgAutoFocus]="vm.assigned.length === 0"
              inputRef
              data-test="input-search"
              #searchInput
              formControlName="searchText"
              type="search"
              [placeholder]="t('project.assign_user.search-members')"
              (ngModelChange)="search$.next(searchTextForm.value.searchText)" />
          </tg-ui-input>
        </form>
        <tui-scrollbar class="assigness-search-container">
          <tui-scrollbar class="scrollbar-members">
            <ul>
              <li
                class="option"
                *ngFor="let member of vm.members; trackBy: trackByMember"
                [class.disabled]="
                  !vm.membersPermissions[member.username].length
                ">
                <button
                  class="unassigned-member-row"
                  data-test="unassigned-member"
                  type="button"
                  [attr.aria-label]="
                    !vm.membersPermissions[member.username].length
                      ? t('project.assign_user.disabled-user-aria', {
                          name: member.fullName,
                          username: member.username
                        })
                      : t('project.assign_user.assign-aria', {
                          name: member.fullName,
                          username: member.username
                        })
                  "
                  [attr.aria-disabled]="
                    !vm.membersPermissions[member.username].length
                  "
                  (keydown.enter)="
                    vm.membersPermissions[member.username].length
                      ? onAssign($event, member)
                      : null
                  "
                  (click)="
                    vm.membersPermissions[member.username].length
                      ? onAssign($event, member)
                      : null
                  ">
                  <tg-user-card
                    class="card"
                    [user]="member"
                    [isSelf]="vm.currentUser.username === member.username"
                    [navigateToUser]="false">
                  </tg-user-card>
                  <tui-svg
                    *ngIf="vm.membersPermissions[member.username].length"
                    class="assign-btn"
                    [tgUiTooltip]="t('project.assign_user.add-assignee')"
                    [tgUiTooltipStaysOpenOnHover]="false"
                    tgUiTooltipPosition="bottom-right"
                    src="plus">
                  </tui-svg>
                  <tui-svg
                    *ngIf="!vm.membersPermissions[member.username].length"
                    class="disabled-btn"
                    [tgUiTooltip]="t('project.assign_user.member-disabled')"
                    [tgUiTooltipStaysOpenOnHover]="false"
                    tgUiTooltipPosition="bottom-right"
                    src="help">
                  </tui-svg>
                </button>
              </li>
            </ul>
          </tui-scrollbar>
          <p
            data-test="no-members"
            class="no-members"
            *ngIf="!vm.members.length">
            <ng-container *ngIf="!searchTextForm.get('searchText')?.value">{{
              t('project.assign_user.no-members')
            }}</ng-container>
            <ng-container *ngIf="searchTextForm.get('searchText')?.value">{{
              t('project.assign_user.no-matches')
            }}</ng-container>
          </p>
        </tui-scrollbar>
      </ng-container>
    </div>
  </ng-container>
</ng-container>
